<template>
    <div>
        <home-header :nav="nav" :logo="logoInfo" :showBack="true"></home-header>
        <main class="main-box">
            <div class="main-box-pc">
                <div class="operate-box">
                    <el-button type="text" icon="el-icon-document-remove" @click="print">打印简历</el-button>
                </div>
                <div class="a4-box">
                    <div class="A4">
                        <div class="left-line">
                            <img src="../assets/images/left-line.png" alt="左边线" />
                        </div>
                        <div class="title-box">
                            <div class="left">
                                <div class="title">我的简历</div>
                                <div class="line">
                                    <img src="../assets/images/left-line.png" alt="左边线" />
                                </div>
                            </div>
                            <div class="intention">求职意向：Web前端工程师</div>
                        </div>
                        <div class="top-line">
                            <img src="../assets/images/top-line.png" alt="顶部图片" />
                        </div>
                        <!-- 我的个人信息 -->
                        <div class="userinfo-box">
                            <div class="title-back-box">
                                <img src="../assets/images/title-back.png" alt="标题背景" />
                                <span>基本信息</span>
                            </div>
                            <div class="userinfo">
                                <div class="left">
                                    <div class="item">
                                        <span class="title">姓名</span>
                                        <span class="colon">:</span>
                                        <span>{{ myUserInfo.username }}</span>
                                    </div>
                                    <div class="item">
                                        <span class="title">出生年月</span>
                                        <span class="colon">:</span>
                                        <span>1997.10</span>
                                    </div>
                                    <div class="item">
                                        <span class="title">邮箱</span>
                                        <span class="colon">:</span>
                                        <span>{{ myUserInfo.email }}</span>
                                    </div>
                                    <div class="item">
                                        <span class="title">电话</span>
                                        <span class="colon">:</span>
                                        <span>{{ myUserInfo.tel }}</span>
                                    </div>
                                    <div class="item">
                                        <span class="title">住址</span>
                                        <span class="colon">:</span>
                                        <span>{{ myUserInfo.address }}</span>
                                    </div>
                                    <div class="item">
                                        <span class="title">工作经验</span>
                                        <span class="colon">:</span>
                                        <span>{{ myUserInfo.work_years }}年</span>
                                    </div>
                                </div>
                                <div class="right">
                                    <img :src="myUserInfo.usericon" :alt="myUserInfo.username" />
                                </div>
                            </div>
                        </div>

                        <!-- 自我评价 -->
                        <div class="evaluate-box">
                            <div class="title-back-box">
                                <img src="../assets/images/title-back.png" alt="标题背景" />
                                <span>自我评价</span>
                            </div>
                            <div class="evaluate">
                                {{ evaluateInfo.content }}
                            </div>
                        </div>

                        <!-- 教育经历 -->
                        <div class="education-box">
                            <div class="title-back-box">
                                <img src="../assets/images/title-back.png" alt="标题背景" />
                                <span>教育背景</span>
                            </div>
                            <div class="education">
                                <div class="item" v-for="(item, index) in educationList" :key="index">
                                    <p>
                                        <span class="times">{{ item.times }}</span>
                                        <span class="school">{{ item.school }}</span>
                                        <span class="major">{{ item.major }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- 技能 -->
                        <div class="ability-box">
                            <div class="title-back-box">
                                <img src="../assets/images/title-back.png" alt="标题背景" />
                                <span>专业技能</span>
                            </div>
                            <div class="ability">
                                <div class="item" v-for="(item, index) in abilityList" :key="index">
                                    <p>
                                        <span class="sorts">{{ index + 1 }}.</span>
                                        <span class="class-text">{{ item.ability }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="a4-line"></div>
                <div class="a4-box">
                    <div class="A4">
                        <!-- 项目经验 -->
                        <div class="left-line left-line-two">
                            <img src="../assets/images/left-line.png" alt="左边线" />
                        </div>
                        <div class="project-box">
                            <div class="title-back-box">
                                <img src="../assets/images/title-back.png" alt="标题背景" />
                                <span>项目经历</span>
                            </div>
                            <div class="project">
                                <div class="item" v-for="(item, index) in projectList" :key="index">
                                    <p>
                                        <span class="name">项目名称：</span>
                                        <span>{{ item.title }}</span>
                                    </p>
                                    <p>
                                        <span class="name">项目时间：</span>
                                        <span>{{ item.time }}</span>
                                    </p>
                                    <div>
                                        <p class="name">项目介绍：</p>
                                        <pre class="introduce">{{ item.introduce }}</pre>
                                    </div>
                                    <p>
                                        <span class="name">我的职责：</span>
                                        <span>{{ item.duty }}</span>
                                    </p>
                                    <p>
                                        <span class="name">项目技术：</span>
                                        <span>{{ item.technology }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="a4-line"></div>
            </div>

            <div class="main-box-phone">
                <user-info :userInfo="userInfo"></user-info>
                <my-label :labels="labels"></my-label>
                <p class="tips">详细简历请用电脑端打开</p>
            </div>
        </main>
        <public-footer :userInfo="logoInfo" :links="links"></public-footer>
        <scoll-top></scoll-top>
    </div>
</template>
<script>
import HomeHeader from '~/components/home-header/index.vue';
import publicFooter from "~/components/public-footer/index.vue";
import scollTop from "~/components/scoll-top/index.vue";
import userInfo from "~/components/user-info/index.vue";
import myLabel from "~/components/my-label/index.vue";
import request from '~/request/request';
import baudupush from '../utils/baidupush';
export default {
    name: 'AboutMe',
    async asyncData({ app, query }) {
        try {
            let nav = await request('/api/index/getNav');
            let logoInfo = await request('/api/index/getBlogTitle');
            let links = await request('/api/index/getLink');
            let myUserInfo = await request('/api/biographicalNotes/getUserInfo?type=' + query.type || '');
            let educationList = await request('/api/biographicalNotes/getEducation');
            let evaluateInfo = await request('/api/biographicalNotes/getEvaluate');
            let abilityList = await request('/api/biographicalNotes/getAbility');
            let projectList = await request('/api/biographicalNotes/getProject');
            let userInfo = await request('/api/index/getMyUserInfo');
            let labels = await request('/api/index/getMyLable');
            app.head.title = '关于我';
            return {
                nav: nav.data,
                logoInfo: logoInfo.data,
                links: links.data,
                myUserInfo: myUserInfo.data,
                educationList: educationList.data,
                evaluateInfo: evaluateInfo.data,
                abilityList: abilityList.data,
                projectList: projectList.data,
                userInfo: userInfo.data,
                labels: labels.data
            }
        } catch (error) {
            return {}
        }
    },
    components: {
        HomeHeader,
        publicFooter,
        scollTop,
        userInfo,
        myLabel
    },
    data() {
        return {
            nav: [],
            logoInfo: {},
            links: [],
            evaluateInfo: {}, // 个人评价
            educationList: [], // 教育经历
            abilityList: [], // 技能
            projectList: [], // 项目经验
            myUserInfo: {}, // 个人信息
            printCss: '',// 打印样式
            userInfo: {},
            labels: [],
        }
    },
    mounted() {
        this.getPrintCss();
        baudupush();
    },
    methods: {
        // 打印简历
        print() {
            let printHtml = document.querySelectorAll('.A4');
            let outerHTML = `
                <html>
                    <head>
                        <title>打印简历</title>
                        <style>
                        div,p,li,ul,pre {
                            box-sizing: border-box;
                            padding: 0;
                            margin: 0;
                        }
                            ${this.printCss}
                        </style>
                    </head>
                <body>
            `;
            printHtml.forEach(item => {
                outerHTML += item.outerHTML;
            });
            outerHTML += '</body></html>';
            // 创建一个 iframe
            let iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            let doc = iframe.contentDocument;
            doc.open();
            doc.write(outerHTML);
            doc.close();
            const loading = this.$loading({
                lock: true,
                text: '正在调用打印服务...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
                loading.close();
                iframe.contentWindow.print();
                document.body.removeChild(iframe);
            }, 1000);
        },
        /**获取打印css*/
        getPrintCss() {
            request('/api/biographicalNotes/getPrintCss').then(res => {
                this.printCss = res.data;
            });
        },
    }
}
</script>
<style lang="scss" scoped>
@import url("../assets/styles/aboutme.min.css");

.main-box {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #F8F9FB;
    position: relative;

    .operate-box {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .a4-box {
        box-shadow: 0 4px 8px 6px rgba(7, 17, 21, 0.06);
        width: 794px;
        margin: 0 auto;
        background-color: #fff;
    }

    .a4-line {
        width: 100%;
        height: 30px;
    }
}

.main-box-phone {
    display: none;
}
 
.main-box-pc {
    display: block;
}

@media screen and (max-width: 768px) {
    .main-box-pc {
        display: none;
    }
 
    .main-box-phone {
        display: block;
        .tips {
            text-align: center;
            margin-top: 20px;
            color: #999;
        }
    }
}</style>